<template>
  <div class="table_box_content">
    <div class="content-box">
      <el-table
        ref="Table"
        class="table-box"
        :data="loginfoWeek.students"
        border
        height="100%"
        :span-method="objectSpanMethod"
        style="width: 100%">
        <el-table-column
          prop="name"
          width="128px"
          align="center"
          label=""
          fixed
        >
        </el-table-column>
        <template v-for='(col,i) in loginfoWeek.dateList'>
          <el-table-column
            :show-overflow-tooltip="true"
            :label="col"
            :key="col"
            :width="i === 0?'128px':''"
            :min-width="i === 0?'128px':'538px'"
            align="center"
          >
            <template slot-scope="scope">
              <div class="box-text" v-if="scope.row.list[i].title">{{scope.row.list[i].title}}</div>
              <div v-else>
                <div v-if="!scope.row.list[i].contentList || !scope.row.list[i].contentList.length" class="box-text">暂无内容</div>
                <div class="flex box-text"
                     style="margin-left: 10px"
                     v-if="scope.row.list[i].type === '1' && scope.row.list[i].contentList.length"
                     v-for="(c_item,c_index) in scope.row.list[i].contentList" :key="c_index">
                  <div class="content-bit">{{ c_index + 1 }}</div>
                  <div class="content-text-1" v-html="c_item.htmlText"></div>
                </div>
                <div class="flex box-text"
                     v-if="scope.row.list[i].type === '2' && scope.row.list[i].contentList.length">
                  <record-edit :head_type_list="compared_type==='1'? head_type_month :head_type_list"
                               is_table
                               :text="scope.row.list[i].contentList"
                               :diary_type="compared_type==='1'? 'month_compare' : 'week'"
                               router_type="record"
                               class="content-text-1"/>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import RecordEdit from '@/appraise/components/recordEdit'

export default {
  props: {
    compared_list: {
      type: Array,
      default: () => []
    },
    compared_type: {
      type: String,
      default: ''
    },
    router_type: {
      type: String,
      default: 'plan'
    }
  },
  components: {
    RecordEdit
  },
  data() {
    return {
      loginfoWeek: {
        'students': [],
        'dateList': ['类别']
      },
      head_type_list: [
        {img:'appraiseimportantmatter',text:'重点事项'},
        {img:'appraisediarymatter',text:'日常事项'},
        {img:'appraiseothermatter',text:'其他事项'},
      ],
      head_type_month: [
        {text:'工作纪实'},
        {text:'个人评价'}
      ],
    }
  },
  watch: {
    compared_list(val) {
      this.loginfoWeek.dateList = ['类别']
      this.loginfoWeek.students = []
      val[0].map(res=> {
        let name = this.compared_type === 1?res.deptName:res.userName
        this.loginfoWeek.dateList.push(name)
      })
      val.map((res,index)=> {
        let item1 = {
          'name':this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
          'list': [{type:'1',title:this.compared_type==='0'?'周计划':'月计划',contentList:[]}],
          'type': '1'
        }
        let item2 = {
          'name':this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
          'list': [{type:'2',title:this.compared_type==='0'?'周纪实':'月小结',contentList:[]}],
          'type': '2'
        }
        res.map(result => {
          item1.list.push({type:'1',title:'','contentList': result.planContentList})
          item2.list.push({type:'2',title:'','contentList': result.recordContentList})
        })
        this.loginfoWeek.students.push(item1)
        this.loginfoWeek.students.push(item2)
      })
      this.$nextTick(()=> {
        this.$refs.Table.doLayout()
      })
    }
  },
  mounted() {
    this.compared_list[0].map(res=> {
      let name = this.compared_type === 1?res.deptName:res.userName
      this.loginfoWeek.dateList.push(name)
    })
    this.compared_list.map((res,index)=> {
      let item1 = {
          'name':this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
          'list': [{type:'1',title:this.compared_type==='0'?'周计划':'月计划',contentList:[]}],
          'type': '1'
        }
        let item2 = {
          'name':this.compared_type==='0'?res[0].weekNum+'周':res[0].monthCode.substring(4)+'月',
          'list': [{type:'2',title:this.compared_type==='0'?'周纪实':'月小结',contentList:[]}],
          'type': '2'
        }
      res.map(result => {
        item1.list.push({type:'1',title:'','contentList': result.planContentList})
        item2.list.push({type:'2',title:'','contentList': result.recordContentList})
      })
      this.loginfoWeek.students.push(item1)
      this.loginfoWeek.students.push(item2)
    })
    this.$nextTick(()=> {
      this.$refs.Table.doLayout()
    })
  },
  methods: {
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0].includes(columnIndex)) {
        let first_idx = this.loginfoWeek.students.findIndex(
          (item) => item.name === row.name
        )
        let same_length = this.loginfoWeek.students.filter(
          (x) => x.name === row.name
        ).length
        return rowIndex === first_idx ? [same_length, 1] : [0, 0]
      }
    }
  }
}
</script>

<style scoped>
::v-deep tr th {
  background-color: #F5F5F5;
}
::v-deep .el-table__fixed {
  height: 100% !important;
}
.box-text {
  padding: 8px;
}
/*table*/
.table_box_content {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
}
.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 0.2rem;
  border-radius: 0.1rem;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-text-1 {
  flex: 1 !important;
  margin-left: 7px;
  font-size: 16px;
  text-align: start !important;
  white-space: pre-wrap;
}
.content-box {
  height: 100%;
  border: 1px solid rgba(0,0,0,0.1)
}
.table-box {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .table-box {
    font-size: 14px;
  }
  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-text-1 {
    flex: 1 !important;
    margin-left: 7px;
    font-size: 14px;
    text-align: start !important;
    white-space: pre-wrap;
  }
}
</style>
